<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../../js/hpFrame.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <el-row>
            <el-col :span="24">
                <el-container>
                    <el-main style="padding:0">
                        <!--表格-->
                        <el-table :data="tableData" :height="talbeheight" size="mini" stripe border style="width: 100%;"
                            ref='table'>
                            </el-table-column>
                            <el-table-column type="index" label="序号" align="center" :index="indexMethod">
                            </el-table-column>
                            <el-table-column prop="title" label="公告名称" align="left" header-align="center">
                            </el-table-column>
                            <el-table-column prop="createByName" label="创建人" align="left" header-align="center"
                                width="100px">
                            </el-table-column>
                            <el-table-column prop="createTime" label="创建时间" align="left" header-align="center"
                                width="150px">
                            </el-table-column>
                            <el-table-column align="center" prop="op" header-align="center" label="操作" width="250">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini" @click="handleDetail(scope.row)">查看</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer style="padding:0">
                        <div class="grid-content bg-purple-light">
                            <!--分页-->
                            <div class="block" style="text-align: center">
                                <el-pagination style="margin-top: 5px;" @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                                    :page-sizes="[5,10,15,20, 30, 50,100]" :page-size="pagination.pageSize" background
                                    :pager-count="pagination.pagerCount" layout="total,  prev, pager, next, jumper"
                                    :total="pagination.total">
                                </el-pagination>
                            </div>
                            <!--操作栏-->
                            <div class="search-content">
                                <el-col :span="24" class="toobar">
                                    <el-button type="primary" @click="add">发布公告</el-button>
                                </el-col>
                            </div>
                        </div>
                    </el-footer>
                </el-container>
            </el-col>
        </el-row>
    </div>
</body>
<script>
    var tableUrl = apiFrameUrl + "notice/getNoticeList";
    var deleteUrl = apiFrameUrl + "notice/removeById";
    var pageData = {
        //表格
        //主要数据
        tableData: [],
        //分页
        pagination: {
            currentPage: 1,
            pageSize: getPageSize(),
            total: 0,
            pagerCount: 9, //超过此页，折叠
        },
        //表格样式
        talbeheight: 500, //表格高度
        //搜索
        searchData: {

        },
        local_userId: localStorage.getItem("local_userId")
    };

    var app = new Vue({
        el: '#app',
        data: pageData,
        methods: {
            //表格
            //排序
            indexMethod: function (index) {
                return (pageData.pagination.currentPage - 1) * pageData.pagination.pageSize + index + 1;
            },
            //分页
            //每页显示数目
            handleSizeChange(val) {
                pageData.pagination.currentPage = 1;
                pageData.pagination.pageSize = val;
                bindGrid();
            },
            //切换页数
            handleCurrentChange(val) {
                pageData.pagination.currentPage = val;
                bindGrid();
            },
            add() {
                OpenTopDialog('noticeadd',
                    'page/notice/notice_add.html', 1256, 0, '新增', bindGrid);
            },
            handleEdit: function (row) {
                OpenTopDialog('noticeedit',
                    'page/notice/notice_edit.html?id=' + row.id, 1256, 0, '编辑', bindGrid);
            },
            handleDetail: function (row) {
                OpenTopDialog('noticedetail',
                    'page/notice/notice_detail.html?id=' + row.id, 1256, 0, '查看', bindGrid);
            },
            handleDelete: function (row) {
                OpenConfirm('提示', '确认删除？', function () {
                    JsonAjax(JSON.stringify(row), deleteUrl, function (data, status) {
                        if (data.success) {
                            OpenSuccess('提示', '删除成功')
                            bindGrid();
                        }
                    })
                })
            }
        },
        mounted() {
            var page = this;
            checkUserInfo();
            this.$nextTick(function () {
                this.talbeheight = getStandTableHeight() + 60;
                bindGrid();
            })
        },
    });

    function bindGrid() {
        var data = {
            "pageNo": pageData.pagination.currentPage,
            "pageSize": pageData.pagination.pageSize,
        };
        JsonAjax(JSON.stringify(data), tableUrl, function (data, status) {
            if (data.success) {
                Vue.set(pageData, "tableData", data.result.records);
                var pagination = pageData.pagination;
                pagination.total = data.result.total;
                Vue.set(pageData, "pagination", pagination);
            }
        })
    }
</script>

</html>